<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签管理</title>

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css">
  <link rel="icon" href="../static/favicon.ico">
</head>
<body>

  <!--导航-->
  <div th:replace="common/blogsHeader :: menu(3)"></div>

  <!--中间内容-->

  <div  class="m-container-small m-padded-tb-big">
    <div class="ui container">

      <div class="ui success message">
        <p>[[${message}]]</p>
      </div>

      <table class="ui celled table">
        <thead>
          <tr>
            <th></th>
            <th>名称</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>

          <tr th:each="tag : ${page.list}">
            <td>[[${tag.id}]]</td>
            <td>[[${tag.name}]]</td>
            <td>
              <a th:href="@{/admin/tags/input(id=${tag.id})}" class="ui mini teal basic button">编辑</a>
              <a th:href="@{/admin/tags/delete(id=${tag.id})}" class="ui mini red basic button">删除</a>
            </td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <th colspan="6">
              <div class="ui mini pagination menu">
                <a class=" item" th:href="@{/admin/tags(page=${page.hasPreviousPage}?${page.prePage}:1)}">上一页</a>
                <a class=" item" th:href="@{/admin/tags(page=${page.hasNextPage}?${page.nextPage}:${page.pages})}">下一页</a>
              </div>
              <a href="/admin/tags/input" class="ui mini right floated teal basic button">新增</a>
            </th>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
  <br><br>

  <!--底部footer-->
  <div th:replace="common/blogsFooter :: #footer"></div>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>

  <script>
    $('.menu.toggle').click(function () {
      $('.m-item').toggleClass('m-mobile-hide');
    });

    $('.ui.dropdown').dropdown({
      on : 'hover'
    });

  </script>

</body>
</html>